<?php
$this->addCssFile([
    'static/plugins/jquery-circliful/css/jquery.circliful.css'
]);

$this->inline('title','控制台');
$static = Yii::$app->view->theme->baseUrl;
?>
<div class="row">
    <div class="col-sm-6 col-lg-3">
        <div class="widget-simple-chart text-right card-box">
            <div class="circliful-chart" data-dimension="90" data-text="35%" data-width="5" data-fontsize="14" data-percent="35" data-fgcolor="#5fbeaa" data-bgcolor="#ebeff2"></div>
            <h3 class="text-success counter">2562</h3>
            <p class="text-muted text-nowrap">Total Sales today</p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3">
        <div class="widget-simple-chart text-right card-box">
            <div class="circliful-chart" data-dimension="90" data-text="75%" data-width="5" data-fontsize="14" data-percent="75" data-fgcolor="#3bafda" data-bgcolor="#ebeff2"></div>
            <h3 class="text-primary counter">5685</h3>
            <p class="text-muted text-nowrap">Daily visitors</p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3">
        <div class="widget-simple-chart text-right card-box">
            <div class="circliful-chart" data-dimension="90" data-text="58%" data-width="5" data-fontsize="14" data-percent="58" data-fgcolor="#f76397" data-bgcolor="#ebeff2"></div>
            <h3 class="text-pink">$ <span class="counter">12480</span></h3>
            <p class="text-muted text-nowrap">Total Earning</p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3">
        <div class="widget-simple-chart text-right card-box">
            <div class="circliful-chart" data-dimension="90" data-text="49%" data-width="5" data-fontsize="14" data-percent="49" data-fgcolor="#98a6ad" data-bgcolor="#ebeff2"></div>
            <h3 class="text-inverse counter">62</h3>
            <p class="text-muted text-nowrap">Pending Orders</p>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <div class="card-box">
            <h4 class="text-dark  header-title m-t-0 m-b-30">Total Revenue</h4>

            <div class="widget-chart text-center">
                <div id="sparkline1"></div>
                <ul class="list-inline m-t-15">
                    <li>
                        <h5 class="text-muted m-t-20">Target</h5>
                        <h4 class="m-b-0">$1000</h4>
                    </li>
                    <li>
                        <h5 class="text-muted m-t-20">Last week</h5>
                        <h4 class="m-b-0">$523</h4>
                    </li>
                    <li>
                        <h5 class="text-muted m-t-20">Last Month</h5>
                        <h4 class="m-b-0">$965</h4>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <div class="col-lg-4">
        <div class="card-box">
            <h4 class="text-dark  header-title m-t-0 m-b-30">Yearly Sales Report</h4>

            <div class="widget-chart text-center">
                <div id="sparkline2"></div>
                <ul class="list-inline m-t-15">
                    <li>
                        <h5 class="text-muted m-t-20">Target</h5>
                        <h4 class="m-b-0">$1000</h4>
                    </li>
                    <li>
                        <h5 class="text-muted m-t-20">Last week</h5>
                        <h4 class="m-b-0">$523</h4>
                    </li>
                    <li>
                        <h5 class="text-muted m-t-20">Last Month</h5>
                        <h4 class="m-b-0">$965</h4>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <div class="col-lg-4">
        <div class="card-box">
            <h4 class="text-dark header-title m-t-0 m-b-30">Weekly Sales Report</h4>

            <div class="widget-chart text-center">
                <div id="sparkline3"></div>
                <ul class="list-inline m-t-15">
                    <li>
                        <h5 class="text-muted m-t-20">Target</h5>
                        <h4 class="m-b-0">$1000</h4>
                    </li>
                    <li>
                        <h5 class="text-muted m-t-20">Last week</h5>
                        <h4 class="m-b-0">$523</h4>
                    </li>
                    <li>
                        <h5 class="text-muted m-t-20">Last Month</h5>
                        <h4 class="m-b-0">$965</h4>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <div class="card-box">
            <div class="row">
                <div class="col-sm-7">
                    <div class="row">
                        <div class="col-xs-6 text-center">
                            <canvas id="partly-cloudy-day" width="100" height="100"></canvas>
                        </div>
                        <div class="col-xs-6">
                            <h2 class="m-t-0 text-muted"><b>32°</b></h2>
                            <p class="text-muted">Partly cloudy</p>
                            <p class="text-muted">15km/h - 37%</p>
                        </div>
                    </div><!-- End row -->
                </div>
                <div class="col-sm-5">
                    <div class="row">
                        <div class="col-xs-4 text-center">
                            <h4 class="text-muted m-t-0">SAT</h4>
                            <canvas id="cloudy" width="35" height="35"></canvas>
                            <h4 class="text-muted">30<i class="wi wi-degrees"></i></h4>
                        </div>
                        <div class="col-xs-4 text-center">
                            <h4 class="text-muted m-t-0">SUN</h4>
                            <canvas id="wind" width="35" height="35"></canvas>
                            <h4 class="text-muted">28<i class="wi wi-degrees"></i></h4>
                        </div>
                        <div class="col-xs-4 text-center">
                            <h4 class="text-muted m-t-0">MON</h4>
                            <canvas id="clear-day" width="35" height="35"></canvas>
                            <h4 class="text-muted">33<i class="wi wi-degrees"></i></h4>
                        </div>
                    </div><!-- end row -->
                </div>
            </div><!-- end row -->
        </div>
    </div> <!-- end col -->

    <div class="col-lg-6">
        <div class="card-box">
            <div class="row">
                <div class="col-sm-7">
                    <div class="">
                        <div class="row">
                            <div class="col-xs-6 text-center">
                                <canvas id="snow" width="100" height="100"></canvas>
                            </div>
                            <div class="col-xs-6">
                                <h2 class="m-t-0 text-muted"><b> 23°</b></h2>
                                <p class="text-muted">Partly cloudy</p>
                                <p class="text-muted">15km/h - 37%</p>
                            </div>
                        </div><!-- end row -->
                    </div><!-- weather-widget -->
                </div>
                <div class="col-sm-5">
                    <div class="row">
                        <div class="col-xs-4 text-center">
                            <h4 class="text-muted m-t-0">SAT</h4>
                            <canvas id="sleet" width="35" height="35"></canvas>
                            <h4 class="text-muted">30<i class="wi wi-degrees"></i></h4>
                        </div>
                        <div class="col-xs-4 text-center">
                            <h4 class="text-muted m-t-0">SUN</h4>
                            <canvas id="fog" width="35" height="35"></canvas>
                            <h4 class="text-muted">28<i class="wi wi-degrees"></i></h4>
                        </div>
                        <div class="col-xs-4 text-center">
                            <h4 class="text-muted m-t-0">MON</h4>
                            <canvas id="partly-cloudy-night" width="35" height="35"></canvas>
                            <h4 class="text-muted">33<i class="wi wi-degrees"></i></h4>
                        </div>
                    </div><!-- End row -->
                </div> <!-- col-->
            </div><!-- End row -->
        </div>
    </div> <!-- end col -->
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card-box">
            <h4 class="text-dark  header-title m-t-0">Latest Projects</h4>
            <p class="text-muted m-b-25 font-13">
                Your awesome text goes here.
            </p>

            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Project Name</th>
                        <th>Start Date</th>
                        <th>Due Date</th>
                        <th>Status</th>
                        <th>Assign</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Minton Admin v1</td>
                        <td>01/01/2016</td>
                        <td>26/04/2016</td>
                        <td><span class="label label-info">Released</span></td>
                        <td>Coderthemes</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Minton Frontend v1</td>
                        <td>01/01/2016</td>
                        <td>26/04/2016</td>
                        <td><span class="label label-success">Released</span></td>
                        <td>Minton admin</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Minton Admin v1.1</td>
                        <td>01/05/2016</td>
                        <td>10/05/2016</td>
                        <td><span class="label label-pink">Pending</span></td>
                        <td>Coderthemes</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Minton Frontend v1.1</td>
                        <td>01/01/2016</td>
                        <td>31/05/2016</td>
                        <td><span class="label label-purple">Work in Progress</span>
                        </td>
                        <td>Minton admin</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Minton Admin v1.3</td>
                        <td>01/01/2016</td>
                        <td>31/05/2016</td>
                        <td><span class="label label-warning">Coming soon</span></td>
                        <td>Coderthemes</td>
                    </tr>

                    <tr>
                        <td>6</td>
                        <td>Minton Admin v1.3</td>
                        <td>01/01/2016</td>
                        <td>31/05/2016</td>
                        <td><span class="label label-primary">Coming soon</span></td>
                        <td>Minton admin</td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- end col -8 -->

    <div class="col-lg-4">
        <div class="card-box widget-user">
            <div>
                <img src="<?=$static?>/images/users/avatar-1.jpg" class="img-responsive img-circle" alt="user">
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5">Chadengle</h4>
                    <p class="text-muted m-b-5 font-13">coderthemes@gmail.com</p>
                    <small class="text-warning"><b>Admin</b></small>
                </div>
            </div>
        </div>

        <div class="card-box widget-user">
            <div>
                <img src="<?=$static?>/images/users/avatar-2.jpg" class="img-responsive img-circle" alt="user">
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5">Tomaslau</h4>
                    <p class="text-muted m-b-5 font-13">coderthemes@gmail.com</p>
                    <small class="text-success"><b>User</b></small>
                </div>
            </div>
        </div>

        <div class="card-box widget-user">
            <div>
                <img src="<?=$static?>/images/users/avatar-7.jpg" class="img-responsive img-circle" alt="user">
                <div class="wid-u-info">
                    <h4 class="m-t-0 m-b-5">Ok</h4>
                    <p class="text-muted m-b-5 font-13">coderthemes@gmail.com</p>
                    <small class="text-pink"><b>Admin</b></small>
                </div>
            </div>
        </div>

    </div>
</div>

<?php
    $this->addJsFile([
        '/static/plugins/waypoints/lib/jquery.waypoints.js',
        '/static/plugins/counterup/jquery.counterup.min.js',
        '/static/plugins/jquery-circliful/js/jquery.circliful.min.js',
        '/static/plugins/jquery-sparkline/jquery.sparkline.min.js',
        '/static/plugins/skyicons/skycons.min.js',
        '/static/pages/jquery.dashboard.js'
    ]);
?>
<?php $this->beginBlock("jsFile","append");?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.counter').counterUp({
                delay: 100,
                time: 1200
            });
            $('.circliful-chart').circliful();
        });

        /* BEGIN SVG WEATHER ICON */
        if (typeof Skycons !== 'undefined'){
            var icons = new Skycons(
                    {"color": "#00b19d"},
                    {"resizeClear": true}
                ),
                list  = [
                    "clear-day", "clear-night", "partly-cloudy-day",
                    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                    "fog"
                ],
                i;

            for(i = list.length; i--; )
                icons.set(list[i], list[i]);
            icons.play();
        }
    </script>
<?php $this->endBlock();?>


